<template>
  <el-dialog :title="`${form.id?'修改':'添加'}机构`" :visible.sync="dialogVisible" @opened="dialogOpen">
    <el-form ref="form" :model="form" label-width="120px" size="small">
      <el-row>
        <el-col :span="12">
          <el-form-item prop="name" label="机构名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="note" label="备注">
            <el-input v-model="form.note"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="code" label="机构代码">
            <el-input v-model="form.code"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="lawCode" label="机构执法代号">
            <el-input v-model="form.lawCode"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item prop="address" label="机构地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
      </el-row>
      <el-form-item prop="depid" label="上级机构">
        <tree-select ref="treeSelect" @change="changeParent" />
      </el-form-item>
      <el-form-item label="角色列表">
        <el-checkbox-group v-model="deptRoleList">
          <el-checkbox v-for="role in roleList" :label="role.roleName" :key="role.id" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item class="from-bnts">
        <el-button type="primary" :loading="loading" @click="saveDept">保存</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import deptApi from "@/api/system/dept";
import roleApi from "@/api/system/role";
import utils from "@/assets/utils/zhzf-util";
import TreeSelect from "../../comps/zhzf/tree-select";

export default {
  name: "deptAddForm",
  components: { TreeSelect },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      form: {},
      treeList: [],
      deptRoleList: [],
      roleList: [],
      checkList: ""
    };
  },
  mounted() {},
  methods: {
    async initPage(param) {
      this.dialogVisible = true;
      this.form = param.info;
      this.treeList = param.treeList;
    },
    changeParent(item) {
      this.form.pid = item.id;
    },
    async dialogOpen() {
      if (this.form.pid && !this.form.pname) {
        let res = await deptApi.info({ id: this.form.pid });
        if (!res.data) {
          this.form.pid = null;
        } else {
          this.form.pname = res.data && res.data.name;
        }
      }

      this.$refs.treeSelect.initPage(
        this.treeList,
        this.form.pid ? { name: this.form.pname, id: this.form.pid } : {},
        this.form.pid ? [this.form.pid] : []
      );

      this.getAndCheckedRole();
    },
    async getAndCheckedRole() {
      let res = await roleApi.rolePage({});
      this.roleList = res.data.rows;
      let deptRole = await deptApi.deptRole({ id: this.form.id });
      this.deptRoleList = [];
      deptRole.data.forEach(item => {
        if (item) {
          this.deptRoleList.push(item.roleName);
        }
      });
    },
    saveDept() {
      this.$refs["form"].validate(async valid => {
        if (valid) {
          this.loading = true;
          await this.saveDetpInfo();
          await this.saveDeptRole();
          this.loading = false;
          this.dialogVisible = false;
          this.$emit("submit");
        } else {
          return false;
        }
      });
    },
    async saveDeptRole() {
      let roleMap = {};
      this.roleList.forEach(item => {
        roleMap[item.roleName] = item.id;
      });

      let roleIds = [];
      this.deptRoleList.forEach(item => {
        roleIds.push(roleMap[item]);
      });
      console.log(this.form.id);
      let data = { deptId: this.form.id, roleIds: roleIds };
      await roleApi.assignDept(data);
    },
    async saveDetpInfo() {
      var time = new Date();
      // this.form.code = '000';
      this.form.status = "000";
      this.form.type = "1";
      this.form.modifyTime = time.getTime();
      this.form.updateDatetime = time.getTime();
      this.form.createdDatetime = time.getTime();
      let method = this.form.id ? deptApi.modDept : deptApi.addDept;

      await method(this.form);
    },
    close() {
      this.$refs["form"].resetFields();
      this.dialogVisible = false;
    }
  }
};
</script>

